<template>
<div id="login">
<!-- <p>{{msg}}</p> -->
			<p id="login_p"><span id="back"><router-link to='/me'><a @click="back()"><</a></router-link></span>用户登录<span id="enroll" @click="jump3('register')">注册</router-link></span></p>
			<div>
				<ul id="choose">
					<li v-for="(i,index) in arr" @click="dian(index)">{{i}}</li>
					<div class="slide"></div>
				</ul>
				<div class="wrap">
					<div class="first">
					<input type="tel" name="" placeholder="请输入用户名/已验证手机" class="yonghu">
					<input type="password" name="" placeholder="请输入登录密码" class="mima">	
					<p class="btn" @click="add()">确认登录</p>
				</div>
				<div class="first" >
					<input type="text" name="" placeholder="请输入手机号码" class="telnum"><span class="obtin" @click="obtain">获取验证码</span><span class="num">60</span>
					<input type="password" name="" placeholder="请输入验证码" class="code">	
					<p class="btn"  @click="add1()">确认登录</p>
				</div>
				</div>
				<div class="bounced">
					<span class="mui-icon mui-icon-closeempty" @click='off()'></span>
					<p style="margin-top: 2rem;">用户名或密码为空</p>
					<p>请重新填写</p>
				</div>
				<div class=" bounced1">
					<span class="mui-icon mui-icon-closeempty" @click='off1()'></span>
					<p style="margin-top: 2rem;">请输入手机号码</p>
					<!--<p>请重新填写</p>-->
				</div>
				<div class='bounced2'>
					<span class="mui-icon mui-icon-closeempty" @click='off2()'></span>
					<p>登录成功</p>
				</div>
				<div class='bounced3'>
					<span class="mui-icon mui-icon-closeempty" @click='off3()'></span>
					<p>用户名或密码不正确</p>
				</div>
				
				
						
								
				
						
				</div>
		</div>
		</template>
		<script>
			
			
			export default {
		name:'Login',
		data () {
			return {
				arr:["账号登录","手机动态登录"]
			}
		},
		methods:{
			dian:function(index){
//				console.log(index);
				$(".slide").animate({"left":2.5+50*index+"%"},200)
				$(".first").eq(index).show().siblings().hide()
			},
			back:function(){
				$('#list').show()
			},
			jump3:function () {
				this.$router.push({path:'/register'})
				$("#list").hide();
			},
			add:function(){
				console.log("aaa")
				if($('.yonghu').val()==""||$('.mima').val()==""){
				$('.bounced').show(500)
				}else if($('.yonghu').val()=="15835288900"||$('.mima').val()=="zhanglinlove1234"){
					$('.bounced2').show(500)
				}else{
					$('.bounced3').show(500)
				}
			},
			off:function(){
				$('.bounced').hide(500)
			},
			add1:function(){
				console.log("bbb")
				if($('.telnum').val()==""){
				$('.bounced1').show(500)
				}
			},
			off1:function(){
				$('.bounced1').hide(500)
			},
			off2:function(){
				$('.bounced2').hide(500)
			},
			off3:function(){
				$('.bounced3').hide(500)
			},
			obtain:function(){
				console.log("www");
				var num =60;
				$('.num').show()
				$('.obtin').hide()
				var time=setInterval(function(){
					num--;
					if(num<=0){
//						
						clearInterval(time)
						$('.num').hide()
						$('.obtin').show()
						
					}
					$('.num').html(num)
					
//					
					
					
//					console.log(num)
					
				},1000)
			}
			


				
				

			
		}
	}
	// $('li').on('click',function(){
	// 	$(this).css('border-bottom','1px solid red')
	// })
		</script>
		<style  scoped>
		*{
			margin: 0;
			padding: 0;
		}
			#login{
			width: 100%;
			height: 100%;
		}
		#login_p{
			width: 100%;
			line-height: 4rem;
			background:red;
			color: white;
			text-align: center;
			font-size: 2rem;
		}
		#back{
			float: left;
			font-size: 2rem;
			/*font-weight: bold;*/
			margin-left: 5%;
			color: white;
		}
		#enroll{
			float:right;
			margin-right: 5%;
			font-size: 1.2rem;
		}
		#back a{
			color: white;
			font-size: 3rem;
		}
		#choose{
			width:100%;
			line-height: 3rem;
			display: flex;
			justify-content: space-around;
			background-color: #ccc;
			position: relative;
			top: -1rem;
		}
		#choose li{
			width: 48%;
			text-align: center;


		}
		#choose .slide{
			position: absolute;
			left: 2.5%;bottom: 0;height: 3px;width: 45%;background: red;

		}
		input{
			width: 90%;
			/*margin-left: 2.5%;*/
			height: 4rem;
			margin-top: 3rem;
			border:0;
		}
		.btn{
			width:  90%;margin-left: 5%;
			background-color: red;
			line-height: 3rem;
			border-radius: 0.5rem;
			color: white;
			margin-top: 3rem;
			text-align: center;
		}
		.first:nth-child(2){
			display: none;
		}
		.obtin{
			/*margin-right: 5rem;*/
			position: absolute;
			float: right;
			display: block;
			top:10.7rem;
			right: 2rem;
			/*width: 10rem;*/
			z-index: 999;
			background: red;
			padding: .5rem;
			color: white;
			font-size: 1.6rem;
			border-radius: .5rem
			/*text-align:center;*/
		}
		.num{
			position: absolute;
			/*float: right;*/
			display: block;
			top:10.7rem;
			right: 2rem;
			/*width: 2rem;*/
			line-height: 20px;
			text-align: center;
			display:none;
			background: red;
			color: white;
			padding: .5rem;
		}
		.bounced{
			overflow: hidden;
			width: 60%;
			height: 150px;
			/*display: none;*/
			position: absolute;
			top: 200px;
			left: 20%;
			background: white;
			z-index: 999;
			text-align: center;line-height: 3rem;
			font-size: 2rem;
			color: black;display: none;
		}
		.bounced span{
			float: right;
			transform: scale(2);
			color: red;
			
		}
		.bounced1{
			overflow: hidden;
			width: 60%;
			height: 150px;
			/*display: none;*/
			position: absolute;
			top: 200px;
			left: 20%;
			background: white;
			z-index: 999;
			text-align: center;line-height: 3rem;
			font-size: 2rem;
			color: black;display: none;
		}
		.bounced1 span{
			float: right;
			transform: scale(2);
			color: red;
			
		}
		.bounced2{
			overflow: hidden;
			width: 60%;
			height: 150px;
			/*display: none;*/
			position: absolute;
			top: 200px;
			left: 20%;
			background: white;
			z-index: 999;
			text-align: center;line-height: 3rem;
			font-size: 2rem;
			color: black;display: none;
		}
		.bounced2 span{
			float: right;
			transform: scale(2);
			color: red;
			
		}
		.bounced3{
			overflow: hidden;
			width: 60%;
			height: 150px;
			/*display: none;*/
			position: absolute;
			top: 200px;
			left: 20%;
			background: white;
			z-index: 999;
			text-align: center;line-height: 3rem;
			font-size: 2rem;
			color: black;display: none;
		}
		.bounced3 span{
			float: right;
			transform: scale(2);
			color: red;
			
		}
		
		</style>